<!DOCTYPE html>

<html>
	<head>
		<title>Basic template</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<script type="text/javascript" src="../libs/OrbitControls.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">

			var orbit;
			var raycaster;
			var mouse;
			var INTERSECTED;


			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 60, -10);
 				scene.add(spotLight);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60,40,1,1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        // scene.add(plane);


		        camera.position.x = -30;
		        camera.position.y = 40;
		        camera.position.z = 30;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        orbit = new THREE.OrbitControls(camera, renderer.domElement);

		        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
		        window.addEventListener( 'resize', onWindowResize, false );

		        var geometry = new THREE.Geometry();
		        var cubeMaterial = new THREE.MeshNormalMaterial({color: 0x00ff00, transparent: true, opacity: 0.5});

		        var meshs = [];
		        for(var i = 0; i < 20; i++){
		        	var cubeMesh = addcube();
                    cubeMesh.updateMatrix();
                    geometry.merge(cubeMesh.geometry, cubeMesh.matrix);

                    meshs.push(cubeMesh);
                    // scene.add(cubeMesh);
		        }

		        // scene.add(new THREE.Mesh(geometry, cubeMaterial));

		        console.log(meshs);

		        raycaster = new THREE.Raycaster();
		        mouse = new THREE.Vector2();

		        var controls = new function(){
		        	this.visible = false;
		        }

		        var gui = new dat.GUI();
		        gui.add(controls, "visible").onChange(function (e){
	        		for(var i = 0; i < meshs.length; i++){
	        			if(e){
							scene.add(meshs[i]);
	        			}
	        			else{
	        				scene.remove(meshs[i]);
	        			}
	        			
	        		}

		        })

 				//add animation
 				render();
 				function render(){
 					stats.update();
 					orbit.update();

 					raycaster.setFromCamera(mouse, camera);
 					var intersects = raycaster.intersectObjects(meshs);

 					if(intersects.length > 0){
 						
						if(INTERSECTED != intersects[0].object) {
							if(INTERSECTED){
								INTERSECTED.scale.set(1, 1, 1);
								// scene.remove(scene.getObjectByName("INTERSECTED"));
							}
							INTERSECTED = intersects[0].object;
							INTERSECTED.scale.set(3, 3, 3);
							INTERSECTED.name = "INTERSECTED";
							// scene.add(INTERSECTED);
							console.log(INTERSECTED);
							
						}

					}
					else{
						if(INTERSECTED){
							INTERSECTED.scale.set(1, 1, 1);
							// scene.remove(scene.getObjectByName("INTERSECTED"));
						}
						INTERSECTED = null;
					}


 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

 				function onWindowResize() {

					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();

					renderer.setSize( window.innerWidth, window.innerHeight );

				}

				function onDocumentMouseMove( event ) {

					event.preventDefault();

					mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
					mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

				}

				function addcube() {

		            var cubeSize = 1.0;
		            var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);

		            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
		            cube.castShadow = true;

		            // position the cube randomly in the scene
		            cube.position.x = -5 + Math.round((Math.random() * 10));
		            cube.position.y = Math.round((Math.random() * 10));
		            cube.position.z = -5 + Math.round((Math.random() * 10));

		            // add the cube to the scene
		            return cube;
		        }

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}



		</script>

	</body>
</html>